Scale Breaks এবং Custom Ticks কনফিগার করা

Chart.js-এ scale breaks এবং custom ticks কনফিগারেশন ব্যবহার করে আপনি চার্টের স্কেলকে আরও কাস্টমাইজড এবং পাঠযোগ্য করতে পারেন। এটি বিশেষ করে যখন আপনার ডেটা অনেক বেশি বৈচিত্র্যপূর্ণ বা স্কেলের মধ্যে বড় গ্যাপ থাকে, তখন এটি সাহায্য করে।

Scale Breaks

Scale breaks আপনাকে একটি স্কেলে একটি বিরতি (gap) তৈরি করার সুযোগ দেয়, যাতে বৃহত ভ্যালু পার্থক্যগুলির মধ্যে ফাঁকা জায়গা রেখে স্কেলটি আরও বুঝতে সহজ হয়। এটি ডেটার মধ্যে বড় পার্থক্য বা আউটলায়ার ভ্যালু যখন থাকে তখন স্কেলকে আরও পড়তে সুবিধাজনক করে।

Chart.js-এ scale breaks সরাসরি সমর্থিত না হলেও, আপনি কাস্টম প্লাগইন ব্যবহার বা কাস্টম স্কেল কনফিগারেশন দিয়ে এটি বাস্তবায়ন করতে পারেন।

Custom Ticks কনফিগার করা

Custom ticks ব্যবহার করে আপনি স্কেলটির টিক মার্কগুলি কাস্টমাইজ করতে পারেন, যেমন তাদের ফন্ট সাইজ, ফন্ট রঙ, অবস্থান বা লেবেল প্রাপ্তির জন্য কাস্টম ফাংশন ব্যবহার করা।

১. Custom Ticks কনফিগার করা

Chart.js-এ স্কেল বা টিক্স কাস্টমাইজেশন অনেক গুরুত্বপূর্ণ কারণ এটি ডেটার বোধগম্যতা উন্নত করতে সহায়ক। আপনি স্কেল টিক্সের আকার, স্টাইল, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।

উদাহরণ: Custom Ticks কনফিগার করা (লাইন চার্ট)

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line', // চার্টের ধরন
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales',
            data: [10, 20, 30, 40],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true, // Y-অক্ষ শূন্য থেকে শুরু হবে
                ticks: {
                    stepSize: 10, // টিক মার্কের স্টেপ সাইজ
                    font: {
                        size: 14, // ফন্ট সাইজ
                        weight: 'bold', // ফন্টের ওজন
                        family: 'Arial', // ফন্ট পরিবার
                    },
                    color: 'rgba(75, 192, 192, 1)', // টিক মার্কের রঙ
                    callback: function(value) {
                        return value + ' units'; // কাস্টম টিক লেবেল
                    }
                }
            }
        }
    }
});

• stepSize: টিক মার্কের মানের স্টেপ সাইজ কাস্টমাইজ করা।
• font: টিক মার্কের ফন্ট কাস্টমাইজ করা (ফন্ট সাইজ, ফন্ট পরিবার, ফন্টের ওজন)।
• color: টিক মার্কের রঙ কাস্টমাইজ করা।
• callback: কাস্টম টিক লেবেল তৈরি করা (এটি সংখ্যার সাথে একটি ইউনিট যোগ করতে ব্যবহৃত হয়েছে)।

২. Scale Breaks কনফিগার করা

Chart.js-এ scale breaks সোজাসুজি সমর্থিত না হলেও, আপনি custom plugin ব্যবহার বা manual scaling দিয়ে এই কাজটি করতে পারেন। সাধারণত, scale breaks ব্যবহার করার জন্য একটি গ্যাপ বা বিরতি (break) তৈরি করতে হয়, যাতে নির্দিষ্ট সীমার বাইরে থাকা ডেটা না দেখানো যায়।

উদাহরণ: Scale Breaks কনফিগারেশন (Custom Scale Breaks)

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Income',
            data: [10, 200, 3000, 50, 100],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value, index, values) {
                        if (value > 1000) {
                            return ''; // ব্রেক পয়েন্টগুলো বাদ দিতে এই লজিক ব্যবহার করা হয়েছে
                        }
                        return value;
                    }
                }
            }
        }
    }
});

এই উদাহরণে, আমরা যেকোনো টিক মার্ক যেটি 1000 এর বেশি, তা শো না করার জন্য একটি কাস্টম কলব্যাক ফাংশন ব্যবহার করেছি। এটি scale breaks তৈরি করতে সহায়ক, যেখানে বড় ডেটার পার্থক্যগুলির মাঝে স্পেস তৈরি করা হয়।

৩. Custom Ticks for Date/Time Axes

যখন আপনি টাইম সিরিজ ডেটা প্লট করেন, তখন Custom ticks for Date/Time axes ব্যবহার করতে পারেন। এখানে আপনি ডেটা আর্কিটেকচার অনুযায়ী কাস্টম টিকস সেট করতে পারবেন।

উদাহরণ: টাইম সিরিজের জন্য কাস্টম টিক্স

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['2021-01-01', '2021-02-01', '2021-03-01', '2021-04-01'],
        datasets: [{
            label: 'Stock Prices',
            data: [120, 150, 170, 200],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2
        }]
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'month',
                    tooltipFormat: 'll'
                },
                ticks: {
                    source: 'labels',
                    callback: function(value, index, values) {
                        return value.substring(0, 7); // মাসের নাম প্রদর্শন
                    }
                }
            }
        }
    }
});

• type: 'time': এক্স-অক্ষ টাইম টাইপের জন্য সেট করা হয়েছে।
• time.unit: আপনি যে ইউনিটটি ব্যবহার করতে চান তা (যেমন, দিন, সপ্তাহ, মাস) নির্ধারণ করা।
• callback: কাস্টম টিক্স লেবেল তৈরি করা।

সারাংশ

Chart.js-এ scale breaks এবং custom ticks কনফিগারেশন দ্বারা আপনি আপনার চার্টের স্কেলকে আরও উন্নত, কার্যকর এবং বোধগম্য করতে পারেন। Custom ticks দিয়ে আপনি টিক মার্কের লেবেল, স্টাইল, আকার এবং কনটেন্ট কাস্টমাইজ করতে পারেন, এবং scale breaks ব্যবহার করে আপনি বড় আউটলিয়ার ডেটাকে বাদ দিতে পারেন বা স্কেলে গ্যাপ সৃষ্টি করতে পারেন। এই কনফিগারেশনগুলির মাধ্যমে আপনি আপনার চার্টের উপস্থাপন আরো সহজ, সুসংগত এবং দৃষ্টিনন্দন করতে পারবেন।